<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>劲松商城后台</title>
<div th:include="Admin/public/Common::head"></div>
</head>
<body>
<div class="main-wrap">
	<div th:include="Admin/public/Common::menu"></div>
	<div class="content-wrap">
<div th:replace="Admin/public/Common::header"></div>
		<main class="main-cont content mCustomScrollbar">
			<div class="page-wrap">
				<!--开始::内容-->
				<section class="page-hd">
					<header>
						<h2 class="title">百度echarts统计图表示例</h2>
						<p class="title-description">
							这里引用百度echarts图表，根据实际情况http://echarts.baidu.com/查看帮助
						</p>
					</header>
					<hr>
				</section>
				<div class="panel panel-default">
					<div class="panel-hd">统计图表样式一</div>
					<div class="panel-bd">
						<div id="tongji1" style="height:400px"></div>
						 <script type="text/javascript">
							var dom = document.getElementById("tongji1");
							var myChart = echarts.init(dom);
							var app = {};
							option = null;
							app.title = '堆叠条形图';

							option = {
								tooltip : {
									trigger: 'axis',
									axisPointer : {            // 坐标轴指示器，坐标轴触发有效
										type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
									}
								},
								legend: {
									data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis:  {
									type: 'value'
								},
								yAxis: {
									type: 'category',
									data: ['周一','周二','周三','周四','周五','周六','周日']
								},
								series: [
									{
										name: '直接访问',
										type: 'bar',
										stack: '总量',
										label: {
											normal: {
												show: true,
												position: 'insideRight'
											}
										},
										data: [320, 302, 301, 334, 390, 330, 320]
									},
									{
										name: '邮件营销',
										type: 'bar',
										stack: '总量',
										label: {
											normal: {
												show: true,
												position: 'insideRight'
											}
										},
										data: [120, 132, 101, 134, 90, 230, 210]
									},
									{
										name: '联盟广告',
										type: 'bar',
										stack: '总量',
										label: {
											normal: {
												show: true,
												position: 'insideRight'
											}
										},
										data: [220, 182, 191, 234, 290, 330, 310]
									},
									{
										name: '视频广告',
										type: 'bar',
										stack: '总量',
										label: {
											normal: {
												show: true,
												position: 'insideRight'
											}
										},
										data: [150, 212, 201, 154, 190, 330, 410]
									},
									{
										name: '搜索引擎',
										type: 'bar',
										stack: '总量',
										label: {
											normal: {
												show: true,
												position: 'insideRight'
											}
										},
										data: [820, 832, 901, 934, 1290, 1330, 1320]
									}
								]
							};;
							if (option && typeof option === "object") {
								myChart.setOption(option, true);
							}
						 </script>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-hd">统计图表样式二</div>
					<div class="panel-bd">
						<div id="tongji2" style="height:400px"></div>
						 <script type="text/javascript">
							var dom = document.getElementById("tongji2");
							var myChart = echarts.init(dom);
							var app = {};
							option = null;
							app.title = '正负条形图';

							option = {
								tooltip : {
									trigger: 'axis',
									axisPointer : {            // 坐标轴指示器，坐标轴触发有效
										type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
									}
								},
								legend: {
									data:['利润', '支出', '收入']
								},
								grid: {
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis : [
									{
										type : 'value'
									}
								],
								yAxis : [
									{
										type : 'category',
										axisTick : {show: false},
										data : ['周一','周二','周三','周四','周五','周六','周日']
									}
								],
								series : [
									{
										name:'利润',
										type:'bar',
										label: {
											normal: {
												show: true,
												position: 'inside'
											}
										},
										data:[200, 170, 240, 244, 200, 220, 210]
									},
									{
										name:'收入',
										type:'bar',
										stack: '总量',
										label: {
											normal: {
												show: true
											}
										},
										data:[320, 302, 341, 374, 390, 450, 420]
									},
									{
										name:'支出',
										type:'bar',
										stack: '总量',
										label: {
											normal: {
												show: true,
												position: 'left'
											}
										},
										data:[-120, -132, -101, -134, -190, -230, -210]
									}
								]
							};
							;
							if (option && typeof option === "object") {
								myChart.setOption(option, true);
							}
						</script>
					</div>
				</div>

				<div class="panel panel-default">
					<div class="panel-hd">统计图表样式三</div>
					<div class="panel-bd">
						<div id="tongji3" style="height:400px"></div>
						<script type="text/javascript">
							var dom = document.getElementById("tongji3");
							var myChart = echarts.init(dom);
							var app = {};
							option = null;
							option = {
								title : {
									text: '测试',
									subtext: '更多查看echarts',
									x:'center'
								},
								tooltip : {
									trigger: 'item',
									formatter: "{a} <br/>{b} : {c} ({d}%)"
								},
								legend: {
									x : 'center',
									y : 'bottom',
									data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
								},
								toolbox: {
									show : true,
									feature : {
										mark : {show: true},
										dataView : {show: true, readOnly: false},
										magicType : {
											show: true,
											type: ['pie', 'funnel']
										},
										restore : {show: true},
										saveAsImage : {show: true}
									}
								},
								calculable : true,
								series : [
									{
										name:'半径模式',
										type:'pie',
										radius : [20, 110],
										center : ['25%', '50%'],
										roseType : 'radius',
										label: {
											normal: {
												show: false
											},
											emphasis: {
												show: true
											}
										},
										lableLine: {
											normal: {
												show: false
											},
											emphasis: {
												show: true
											}
										},
										data:[
											{value:10, name:'rose1'},
											{value:5, name:'rose2'},
											{value:15, name:'rose3'},
											{value:25, name:'rose4'},
											{value:20, name:'rose5'},
											{value:35, name:'rose6'},
											{value:30, name:'rose7'},
											{value:40, name:'rose8'}
										]
									},
									{
										name:'面积模式',
										type:'pie',
										radius : [30, 110],
										center : ['75%', '50%'],
										roseType : 'area',
										data:[
											{value:10, name:'rose1'},
											{value:5, name:'rose2'},
											{value:15, name:'rose3'},
											{value:25, name:'rose4'},
											{value:20, name:'rose5'},
											{value:35, name:'rose6'},
											{value:30, name:'rose7'},
											{value:40, name:'rose8'}
										]
									}
								]
							};
							;
							if (option && typeof option === "object") {
								myChart.setOption(option, true);
							}
						</script>
					</div>
				</div>
				<!--开始::结束-->
			</div>
		</main>
		<div th:replace="Admin/public/Common::footer"></div>
	</div>
</div>

<div class="mask"></div>
<div class="dialog">
	<div class="dialog-hd">
		<strong class="lt-title">标题</strong>
		<a class="rt-operate icon-remove JclosePanel" title="关闭"></a>
	</div>
	<div class="dialog-bd">
		<!--start::-->
		<p>这里是基础弹窗,可以定义文本信息，HTML信息这里是基础弹窗,可以定义文本信息，HTML信息。</p>
		<!--end::-->
	</div>
	<div class="dialog-ft">
		<button class="btn btn-info JyesBtn">确认</button>
		<button class="btn btn-secondary JnoBtn">关闭</button>
	</div>
</div>
</body>
</html>
